<template>
  <el-dialog title="参数配置方案" v-model="dialogVisible" width="40%">
    <div class="params-box">
      <el-form ref="ruleFormRef" :model="form" label-width="auto">
        <el-form-item label="参数方案名称：" prop="newConfigName">
          <el-row :gutter="20">
            <el-col :span="16"> <el-input placeholder="请输入" v-model="form.newConfigName" /></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="备注：" prop="back">
          <el-row :gutter="20">
            <el-col :span="16"> <el-input placeholder="请输入" v-model="form.back" type="textarea" /></el-col>

          </el-row>

        </el-form-item>
      </el-form>

    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSaveParamsPlan">保存</el-button>
        <el-button @click="closeDialog()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose } from 'vue'

const dialogVisible = ref(false)


const form = ref({
  newConfigName: '',
  back:''
})
const emit = defineEmits(['saveParamsPlan'])
// 关闭弹框 清空表单
const closeDialog = () => {
  dialogVisible.value = false

}
// 保存 并传值给父组件
const handleSaveParamsPlan = () => {
  emit('saveParamsPlan', form.value)
  dialogVisible.value = false
}
// 打开弹框 formScid方案id
function handleOpenModal(scName, back) {
  dialogVisible.value = true

  form.value.newConfigName = ''
  form.value.back = ''

  form.value.newConfigName = scName
  form.value.back = back
}
defineExpose({ handleOpenModal })



</script>

<style lang="less" scoped>
.params-box {
  height: 300px;

  :deep(.el-row) {
    display: flex;
    align-items: center;
    width: 100%;
  }
}
</style>
